<template>
  <el-dialog class="dialog" title="绑定规格" center="center" :visible.sync="show" :before-close="cancelBind">
    <div>
      <el-form :inline="true" :model="filters" class="demo-form-inline">

        <el-form-item label="规格(多选):" prop="specIds">
          <el-select v-model="filters.specIds" multiple clearable filterable>
            <el-option v-for="item in dataList" :key="item.specId" :value="item.specId"
                       :label="item.specName">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </div>

    <div slot="footer">
      <el-button plain type="primary" @click="sureClick">保 存</el-button>
      <el-button plain @click="cancelBind">取 消</el-button>
    </div>

  </el-dialog>
</template>
<script>
  import SpecApi from "@/api/goods/spec"

  export default {
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      specType: {
        type: Number
      },
      id: {
        type: Number | String
      },
    },
    watch: {
      show(val) {
        if (val) {
          this.listData()
        }
      },
    },
    data() {
      return {
        dataList: [],
        filters:{
          specIds:[]
        }
      }
    },
    components: {},
    methods: {
      cancelBind() {
        this.$emit("cancel")
      },
      listData() {
        // 获取列表数据
        let cond = {
          specType: this.specType
        }
        SpecApi.listIdName(cond)
          .then(res => {
            this.dataList = res.data
          }).catch(err => {
        })
        SpecApi.getSpecIdsByRelation({classifyId:this.id})
          .then(res => {
            if (res.data){
              this.filters.specIds = res.data
            }
          }).catch(err => {
        })
      },
      sureClick() {
        let param = {
          specIds: this.filters.specIds,
          classifyId: this.id
        }
        SpecApi.bandRelation(param).then(res => {
          this.$Utils.notifySuccess()
          this.cancelBind()
        })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .dialog {
    &::v-deep .el-dialog {
      width: max-content;
    }

    .el-radio-group {
      margin-left: 10px;

      .el-radio {
        margin-right: 20px;
      }
    }

    .img-wrapper {
      width: 80px;
      height: 60px;
      overflow: hidden;
      border-radius: 3px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;

      .el-image {
        width: 100%;

        &::v-deep img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
</style>

